<!--我要预约 -->
<template>
	<view class="warps">
		<view class="f c" style="background:#fff;">
			<view class="vw90 f b c mars">
				<view class="f d c p_t_10" :class="DC==0?'hei':'hui'" @click="DCs(0)">
					<text class="fs32 bold">日期</text>
					<text class="fs20">周一</text>
				</view>
				<view class="f d c p_t_10" :class="DC==1?'hei':'hui'" @click="DCs(1)">
					<text class="fs32 bold">日期</text>
					<text class="fs20">周二</text>
				</view>
				<view class="f d c p_t_10" :class="DC==2?'hei':'hui'" @click="DCs(2)">
					<text class="fs32 bold">日期</text>
					<text class="fs20">周三</text>
				</view>
				<view class="f d c p_t_10" :class="DC==3?'hei':'hui'" @click="DCs(3)">
					<text class="fs32 bold">日期</text>
					<text class="fs20">周四</text>
				</view>
				<view class="f d c p_t_10" :class="DC==4?'hei':'hui'" @click="DCs(4)">
					<text class="fs32 bold">日期</text>
					<text class="fs20">周五</text>
				</view>
				<view class="f d c p_t_10" :class="DC==5?'hei':'hui'" @click="DCs(5)">
					<text class="fs32 bold">日期</text>
					<text class="fs20">周六</text>
				</view>
				<view class="f d c p_t_10" :class="DC==6?'hei':'hui'" @click="DCs(6)">
					<text class="fs32 bold">日期</text>
					<text class="fs20">周日</text>
				</view>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" border-radius="24">
			<view class="Details3_popup">
				<view class="vw90 f b c bold p_t_20">
					<text class="fs32" style="margin-left:330rpx;">已选课程</text>
					<image @click="show = false" style="width: 32rpx;height: 32rpx;" src="../../../static/img/139.png"
						mode=""></image>
				</view> 
				<view class="quanxian"></view>
				<view class="w90 f b c m_t_40" v-for="(item,index) in popup" :key="index">
					<view class="f d c fs16">
						<text>2021.11.10</text>
						<text>09:00~10:00</text>
					</view>
					<view class="vw55 v f b">
						<view>
							<image style="width: 156rpx;height: 100rpx;" src="../../../static/img/073.png" mode="">
							</image>
						</view>
						<view class="f d">
							<text class="fs28 bold">课程名称课程名称</text>
							<view class="vw30 f b c p_t_25" @click="ao()">
								<text class="fs20 cheng">教练姓名</text>
								<text class="fs20 lv">教室场地</text>
							</view>
						</view>
					</view>
					<view>
						<u-radio-group v-model="value" @change="radioGroupChange">
							<u-radio @change="radioChange" :name="item.name" :disabled="item.disabled">
								{{item.name}}
							</u-radio>
						</u-radio-group>
					</view>
				</view>
			</view>
		</u-popup>
		<view class="Details3_bottom">
			<view class="w95 f b c">
				<view>
					<image style="width: 34rpx;height: 36rpx;" src="../../../static/img/137.png" mode=""></image>
				</view>
				<view>
					<view class="vw40 f b">
						<text class="fs28 bold">已选3节</text>
						<view class="vw20 f b c" @click="show = true">
							<text class="fs24 cheng">查看详情</text>
							<image style="width: 24rpx;height: 24rpx;" src="../../../static/img/138.png" mode="">
							</image>
						</view>
					</view>
					<view>
						<text class="fs20 hui">提示：最多可预约1周的课程，预约后不可取消</text>
					</view>
				</view>
				<view class="Details3_bottom_but" @click="confirm">
					<button type="default">确定</button>
				</view>
			</view>
		</view>
		<!-- 第0个内容 -->
		<view v-show="DC==0" class="">
			<!-- 这是内容 -->
			<view class="w90 f b c" v-for="(item,index) in listsa" :key="index" @click="ao()">
				<view class="f d c">
					<text>09:00</text>
					<text>|</text>
					<text>10:00</text>
				</view>
				<view class="vw55 v f b">
					<view>
						<image style="width: 156rpx;height: 100rpx;" src="../../../static/img/015.png" mode=""></image>
					</view>
					<view class="f d">
						<text class="fs28 bold">课程名称课程名称</text>
						<view class="vw30 f b c p_t_25">
							<text class="fs20 cheng">教练姓名</text>
							<text class="fs20 lv">教室场地</text>
						</view>
					</view>
				</view>
				<view>
					<u-radio-group v-model="value" @change="radioGroupChange">
						<u-radio @change="radioChange" :name="item.name" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
		</view>
		<!-- 第1个内容 -->
		<view v-show="DC==1">
			<!-- 这是内容 -->
			<view class="w90 f b c" v-for="(item,index) in listsa" :key="index" @click="ao()">
				<view class="f d c">
					<text>09:00</text>
					<text>|</text>
					<text>10:00</text>
				</view>
				<view class="vw55 v f b">
					<view>
						<image style="width: 156rpx;height: 100rpx;" src="../../../static/img/073.png" mode=""></image>
					</view>
					<view class="f d">
						<text class="fs28 bold">课程名称课程名称</text>
						<view class="vw30 f b c p_t_25">
							<text class="fs20 hui">教练姓名</text>
							<text class="fs20 hui">教室场地</text>
						</view>
					</view>
				</view>
				<view>
					<u-radio-group v-model="value" @change="radioGroupChange">
						<u-radio @change="radioChange" :name="item.name" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
		</view>
		<!-- 第2个内容 -->
		<view v-show="DC==2">
			<!-- 这是内容 -->
			<view class="w90 f b c" v-for="(item,index) in listsa" :key="index" @click="ao()">
				<view class="f d c">
					<text>09:00</text>
					<text>|</text>
					<text>10:00</text>
				</view>
				<view class="vw55 v f b">
					<view>
						<image style="width: 156rpx;height: 100rpx;" src="../../../static/img/073.png" mode=""></image>
					</view>
					<view class="f d">
						<text class="fs28 bold">课程名称课程名称</text>
						<view class="vw30 f b c p_t_25">
							<text class="fs20 hui">教练姓名</text>
							<text class="fs20 hui">教室场地</text>
						</view>
					</view>
				</view>
				<view>
					<u-radio-group v-model="value" @change="radioGroupChange">
						<u-radio @change="radioChange" :name="item.name" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
		</view>
		<!-- 第3个内容 -->
		<view v-show="DC==3">
			<!-- 这是内容 -->
			<view class="w90 f b c" v-for="(item,index) in listsa" :key="index" @click="ao()">
				<view class="f d c">
					<text>09:00</text>
					<text>|</text>
					<text>10:00</text>
				</view>
				<view class="vw55 v f b">
					<view>
						<image style="width: 156rpx;height: 100rpx;" src="../../../static/img/073.png" mode=""></image>
					</view>
					<view class="f d">
						<text class="fs28 bold">课程名称课程名称</text>
						<view class="vw30 f b c p_t_25">
							<text class="fs20 hui">教练姓名</text>
							<text class="fs20 hui">教室场地</text>
						</view>
					</view>
				</view>
				<view>
					<u-radio-group v-model="value" @change="radioGroupChange">
						<u-radio @change="radioChange" :name="item.name" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
		</view>
		<!-- 第4个内容 -->
		<view v-show="DC==4">
			<!-- 这是内容 -->
			<view class="w90 f b c" v-for="(item,index) in listsa" :key="index" @click="ao()">
				<view class="f d c">
					<text>09:00</text>
					<text>|</text>
					<text>10:00</text>
				</view>
				<view class="vw55 v f b">
					<view>
						<image style="width: 156rpx;height: 100rpx;" src="../../../static/img/073.png" mode=""></image>
					</view>
					<view class="f d">
						<text class="fs28 bold">课程名称课程名称</text>
						<view class="vw30 f b c p_t_25">
							<text class="fs20 hui">教练姓名</text>
							<text class="fs20 hui">教室场地</text>
						</view>
					</view>
				</view>
				<view>
					<u-radio-group v-model="value" @change="radioGroupChange">
						<u-radio @change="radioChange" :name="item.name" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
		</view>
		<!-- 第5个内容 -->
		<view v-show="DC==5">
			<!-- 这是内容 -->
			<view class="w90 f b c" v-for="(item,index) in listsa" :key="index" @click="ao()">
				<view class="f d c">
					<text>09:00</text>
					<text>|</text>
					<text>10:00</text>
				</view>
				<view class="vw55 v f b">
					<view>
						<image style="width: 156rpx;height: 100rpx;" src="../../../static/img/073.png" mode=""></image>
					</view>
					<view class="f d">
						<text class="fs28 bold">课程名称课程名称</text>
						<view class="vw30 f b c p_t_25">
							<text class="fs20 hui">教练姓名</text>
							<text class="fs20 hui">教室场地</text>
						</view>
					</view>
				</view>
				<view>
					<u-radio-group v-model="value" @change="radioGroupChange">
						<u-radio @change="radioChange" :name="item.name" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
		</view>
		<!-- 第6个内容 -->
		<view v-show="DC==6">
			<!-- 这是内容 -->
			<view class="w90 f b c" v-for="(item,index) in listsa" :key="index" @click="ao()">
				<view class="f d c">
					<text>09:00</text>
					<text>|</text>
					<text>10:00</text>
				</view>
				<view class="vw55 v f b">
					<view>
						<image style="width: 156rpx;height: 100rpx;" src="../../../static/img/073.png" mode=""></image>
					</view>
					<view class="f d">
						<text class="fs28 bold">课程名称课程名称</text>
						<view class="vw30 f b c p_t_25">
							<text class="fs20 hui">教练姓名</text>
							<text class="fs20 hui">教室场地</text>
						</view>
					</view>
				</view>
				<view>
					<u-radio-group v-model="value" @change="radioGroupChange">
						<u-radio @change="radioChange" :name="item.name" :disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				DC: 0, //  0:上课   1:课后
				listsa: [{
						url: '../../../static/img/015.png'
					},
					{
						url: '../../../static/img/015.png'
					},
					{
						url: '../../../static/img/015.png'
					},
					{
						url: '../../../static/img/015.png'
					},
					{
						url: '../../../static/img/015.png'
					},
					{
						url: '../../../static/img/015.png'
					}
				],
				popup: [{
						url: '../../../static/img/015.png'
					},
					{
						url: '../../../static/img/015.png'
					},
					{
						url: '../../../static/img/015.png'
					},
				],
				list: [{
						name: 'apple',
						disabled: false
					},
					{
						name: 'banner',
						disabled: false
					},
					{
						name: 'orange',
						disabled: false
					}
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
				value: 'orange',
				show: false
			}
		},
		onLoad() {
			// 动态导航条文字
			uni.setNavigationBarTitle({
				title: '全部课程'
			})
		},
		methods: {
			DCs(e) {
				this.DC = e
			},
			// toMeunsList(e) {
			// 	console.log(e) //这里打印出来是 0 1 2 3 数组索引值
			// 	if (e == 0) {
			// 		uni.navigateTo({
			// 			url: "/pages/jiaolianduan/details/details"
			// 		})
			// 	}
			// 	if (e == 1) {
			// 		uni.navigateTo({
			// 			url: "/pages/my/order"
			// 		})
			// 	}
			// 	if (e == 2) {
			// 		uni.navigateTo({
			// 			url: "/pages/my/favorite"
			// 		})
			// 	}
			// }
			ao() {
				uni.navigateTo({
					url: "../details/details"
				})
			},
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				// console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				// console.log(e);
			},
			confirm(){
				uni.navigateTo({
					url:'../make/make'
				})
			}
		}
	}
</script>

<style scoped>
	.warps {
		height: 100vh;
		overflow: hidden;
		background-color: #F6F8FC;
	}

	.information-buts {
		width: 228rpx;
		height: 36rpx;
		line-height: 36rpx;
		font-size: 20rpx;
		opacity: 1;
		background: #ffffff;
		border: 2rpx solid #1f73f2;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		color: #1f73f2;
	}

	.Details3_bottom {
		width: 750rpx;
		height: 160rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.16);
		position: fixed;
		bottom: 0;
	}

	.All-lan {
		width: 120rpx;
		height: 94rpx;
		opacity: 1;
		background: #1f73f2;
	}

	.hei {
		width: 108rpx;
		height: 94rpx;
		background: #1f73f2;
		color: #fff;
	}

	.hui {}

	.Details3_bottom_but {
		width: 140rpx;
		height: 60rpx;
	}

	.Details3_bottom_but>button {
		width: 140rpx;
		height: 60rpx;
		line-height: 60rpx;
		background: #1f73f2;
		border-radius: 30rpx;
		font-size: 24rpx;
		color: #ffffff;
	}

	.Details3_popup {
		width: 750rpx;
		height: 620rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(0, 0, 0, 0.16);
	}

	.quanxian {
		width: 750rpx;
		height: 2rpx;
		border: 2rpx solid #eeeeee;
	}
</style>
